<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="shortcut icon" href="images/favicon/favicon.png" type="image/x-icon">
  <link rel="icon" href="images/favicon/favicon.png" type="image/x-icon">

  <title>TEAM Creative Agency Template</title>

  <!--Library Styles-->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/lib/font-awesome.css" rel="stylesheet">
  <link href="css/lib/nivo-lightbox.css" rel="stylesheet">
  <link href="css/lib/nivo-themes/default/default.css" rel="stylesheet">

  <!--Template Styles-->
  <link href="css/style.css" rel="stylesheet">
  <link href="css/scheme/purple.css" rel="stylesheet">

  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
  <script src="js/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<header class="nav-header">
  <nav class="nav">
    <div class="nav-logo">
      <img src="images/logo.png">
    </div>
    <div class="nav-text">
      <a href="login.html">登陆</a>
      <span>|</span>
      <a href="#">退出</a>
    </div>
  </nav>
</header>
<div data-spy="scroll">
  <!-- Preloader -->
  <div id="preloader">
    <div id="status"></div>
  </div>

  <div id="main-wrapper">

    <!-- Site Navigation -->
    <div id="menu">
      <nav class="navbar navbar-default" role="navigation">

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-navbar-collapse">
          <div  class="nav navbar-nav">
            <div class="nav-list">
              <a data-toggle="collapse"  href="#one">公司管理</a>
            </div>
            <div id="one" class="collapse nav-list">
              <div class="active nav-list-item"><a class="sscroll" href="index.html#home">管理1号</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#services">管理2号</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#portfolio">管理3号</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#testimonial">管理4号</a></div>
            </div>
            <div class="nav-list">
              <a data-toggle="collapse"  href="#two">车队管理</a>
            </div>
            <div id="two" class="collapse nav-list">
              <div class="nav-list-item"><a class="sscroll" href="index.html#about">车队1</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#clients">车队2</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#blog-front">车队3</a></div>
              <div class="nav-list-item"><a class="sscroll" href="index.html#contact">车队4</a></div>
            </div>
          </div>
        </div>
        <!-- /.navbar-collapse -->
      </nav>
    </div>

    <div id="container">
      <!-- BEGIN HOME -->
      <section id="home" class="home">
        <!-- Superslides -->
        <div id="home-slide">
          <ul class="slides-container text-center">
            <li>
              <div class="slide-text">
                <h2>Built With Bootstrap</h2>
                <span>Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects</span>
                <br/>
              </div>
              <div class="slide-filter"></div>
              <img src="images/slider/slide-1.jpg" class="par" alt="first">
            </li>
            <li>
              <div class="slide-text">
                <h2>Fullscreen Slider</h2>
                <span>Superslides - A fullscreen, hardware accelerated slider for jQuery</span>
                <br/>
              </div>
              <div class="slide-filter"></div>
              <img src="images/slider/slide-2.jpg" class="par" alt="first">
            </li>
            <li>
              <div class="slide-text">
                <h2>Elegant Design</h2>
                <span>We focused on usability of the template and combined useful content blocks based on that</span>
                <br/>
              </div>
              <div class="slide-filter"></div>
              <img src="images/slider/slide-3.jpg" class="par" alt="first">
            </li>
          </ul>
          <nav class="slides-navigation slidez">
            <a href="javascript:;" class="next">
              <i class="fa fa-angle-right"></i>
            </a>
            <a href="javascript:;" class="prev">
              <i class="fa fa-angle-left"></i>
            </a>
          </nav>
        </div>
        <!-- End of Superslide -->
      </section>
      <!-- END HOME -->

      <!-- BEGIN SERVICES -->
      <section id="services" class="services">
        <div class="row">
          <div class="col-md-12">
            <div class="header-content">
              <h2>Services</h2>
              <h3>This is what we are good at</h3>
            </div>
          </div>
          <div class="col-md-12">
            <div class="row">
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-paper-plane"></i>
                  </div>
                  <h3 class="heading">Web Design</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-diamond"></i>
                  </div>
                  <h3 class="heading">Web Programming</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-camera"></i>
                  </div>
                  <h3 class="heading">Branding</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-heartbeat"></i>
                  </div>
                  <h3 class="heading">Consultation</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-life-ring"></i>
                  </div>
                  <h3 class="heading">Technical Writing</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
              <div class="col-md-4 col-sm-6 col-xs-12">
                <div class="service">
                  <div class="icon-holder">
                    <i class="fa fa-rocket"></i>
                  </div>
                  <h3 class="heading">Bug Hunt</h3>
                  <p class="description">A elementum ligula lacus ac quam ultrices a scelerisque praesent vel suspendisse
                    scelerisque a aenean hac montes.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- END SERVICES -->
      <div class="copyrights">Collect from <a href="http://www.cssmoban.com/" title="模板之家">模板之家</a></div>
      <!-- BEGIN PORTFOLIO -->
      <section id="portfolio" class="portfolio gray">
        <div class="row">
          <div class="col-md-12">
            <div class="header-content">
              <h2>Portfolio</h2>
              <h3>Some of our accomplishments</h3>
            </div>
          </div>

          <div class="col-md-12">
            <ul class="portfolioFilter text-center">
              <li data-filter="websites">WEB SITES</li>
              <li data-filter="illustrations">ILLUSTRATIONS</li>
              <li data-filter="photo">PHOTOGRAPHS</li>
              <li data-filter="all">EVERYTHING</li>
            </ul>
          </div>
          <div class="col-md-12 mg-bt-80">
            <div class="row portfolioContainer  text-center">
              <div class="col-md-4 col-xs-6 portfolio-item websites">
                <a class="popup" href="images/portfolio/portfolio-thumb-1.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Designing UI/UX
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-1.jpg" alt="portfolio-thumb-1">
                </a>
              </div>
              <div class="col-md-4 col-xs-6 portfolio-item illustrations">
                <a class="popup" href="images/portfolio/portfolio-thumb-5.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Designing Apps
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-5.jpg" alt="portfolio-thumb-5">
                </a>
              </div>
              <div class="col-md-4 col-xs-6 portfolio-item websites">
                <a class="popup" href="images/portfolio/portfolio-thumb-3.jpg" title="Image with title"
                   data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Branding Identity
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-3.jpg" alt="portfolio-thumb-3">
                </a>
              </div>
              <div class="col-md-4 col-xs-6 portfolio-item photo">
                <a class="popup" href="images/portfolio/portfolio-thumb-4.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Photography
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-4.jpg" alt="portfolio-thumb-4">
                </a>
              </div>
              <div class="col-md-4 col-xs-6 portfolio-item websites">
                <a class="popup" href="images/portfolio/portfolio-thumb-2.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Website Design
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-2.jpg" alt="portfolio-thumb-2">
                </a>
              </div>
              <div class="col-md-4 col-xs-6 portfolio-item illustrations">
                <a class="popup" href="images/portfolio/portfolio-thumb-6.jpg" data-lightbox-gallery="team-portfolio">
                                    <span class="project-hover">
                                        <span>Branding Illustration
                                        </span>
                                    </span>
                  <img src="images/portfolio/portfolio-thumb-6.jpg" alt="portfolio-thumb-6">
                </a>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- END PORTFOLIO -->

      <!-- BEGIN TESTIMONIAL -->
      <section id="testimonial" class="testimonial">

        <div class="row">
          <div class="col-md-12 mg-bt-80">
            <div class="header-content">
              <h2>Testimonials</h2>
              <h3>What Clients are saying about us?</h3>
            </div>
          </div>

          <div class="col-md-12">
            <div id="bx-pager" class="client-photos">
              <a class="client-photo" data-slide-index="0" href="">
                <img alt="" src="images/clients/avatar-1.jpg"> <!-- Client photo 1 -->
              </a>
              <a class="client-photo" data-slide-index="1" href="">
                <img alt="" src="images/clients/avatar-2.jpg"> <!-- Client photo 2 -->
              </a>
              <a class="client-photo" data-slide-index="2" href="">
                <img alt="" src="images/clients/avatar-3.jpg"> <!-- Client photo 3 -->
              </a>
            </div>
            <ul class="bxslider">
              <li>
                <h3>Work with TEAM was a pleasure. They understood exactly what I wanted and created an awesome site for
                  my company.</h3>
                <span>&mdash;<strong>Jane Pearson</strong>, CEO Pearson Associates</span>
              </li>
              <li>
                <h3>I'm really happy with the results. Get 100% satisfaction is difficult but TEAM got it without
                  problems.</h3>
                <span>&mdash;<strong>Roy Royce</strong>, DevX</span>
              </li>
              <li>
                <h3>If you wish success in life, make perseverance your bosom friend, experience your wise counselor,
                  caution your elder brother and hope your guardian genius.</h3>
                <span>&mdash;<strong>Minion Max</strong>, Bubble Gum</span>
              </li>
            </ul>

          </div>
        </div>

      </section>
      <!-- END TESTIMONIAL -->

      <!-- BEGIN TEAM -->
      <section id="about" class="about gray">
        <div class="row">
          <div class="col-md-12 mg-bt-80">
            <div class="header-content">
              <h2>The Team</h2>
              <h3>People behind the success</h3>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="row mg-bt-40">
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="teams">
                  <div class="pict">
                    <img src="images/team/01.jpg" alt="Team 1">
                  </div>
                  <div class="desc">
                    <h3>John Doe</h3>
                    <span>Web Developer</span>
                    <div class="social">
                      <a href="javascript:;"><i class="fa fa-facebook"></i></a>
                      <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                      <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
                      <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="teams">
                  <div class="pict">
                    <img src="images/team/02.jpg" alt="Team 1">
                  </div>
                  <div class="desc">
                    <h3>Jane Doe</h3>
                    <span>Creative Writer</span>
                    <div class="social">
                      <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
                      <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                      <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                      <a href="javascript:;"><i class="fa fa-linkedin"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="teams">
                  <div class="pict">
                    <img src="images/team/03.jpg" alt="Team 1">
                  </div>
                  <div class="desc">
                    <h3>John Doe</h3>
                    <span>Designer</span>
                    <div class="social">
                      <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                      <a href="javascript:;"><i class="fa fa-google-plus"></i></a>
                      <a href="javascript:;"><i class="fa fa-linkedin"></i></a>
                      <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                    </div>
                  </div>

                </div>
              </div>
              <div class="col-md-3 col-sm-6 col-xs-12">
                <div class="teams">
                  <div class="pict">
                    <img src="images/team/04.jpg" alt="Team 1">
                  </div>
                  <div class="desc">
                    <h3>Jane Doe</h3>
                    <span>Creative Writer</span>
                    <div class="social">
                      <a href="javascript:;"><i class="fa fa-facebook"></i></a>
                      <a href="javascript:;"><i class="fa fa-instagram"></i></a>
                      <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
                      <a href="javascript:;"><i class="fa fa-twitter"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- END TEAM -->

      <!-- BEGIN CLIENTS -->
      <section id="clients" class="clients">
        <div class="row">
          <div class="col-md-12 mg-bt-80">
            <div class="header-content">
              <h2>Clients</h2>
              <h3>Some of our clients</h3>
            </div>
          </div>
          <div class="col-lg-12">
            <div class="row mg-bt-60">
              <div class="col-md-12">
                <ul class="client-slider">
                  <li><img src="images/clients/logo1.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo2.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo3.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo4.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo5.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo6.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo7.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo8.png" alt="logo-1"></li>
                  <li><img src="images/clients/logo9.png" alt="logo-1"></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- END CLIENTS -->

      <!-- BEGIN BLOG -->
      <section id="blog-front" class="blog-front gray">
        <div class="row">
          <div class="col-md-12 mg-bt-80">
            <div class="header-content">
              <h2>Blog</h2>
              <h3>Thoughts on design and development trends</h3>
            </div>
          </div>
        </div>
        <div class="row">
          <article class="col-md-4 col-sm-6">
            <figure class="blog-thumb">
              <img src="images/blog/blog-1.jpg" alt="blog-thumb">
            </figure>
            <div class="post-area">
              <a class="post-cat" href="">
                <h4>Design</h4>
              </a>
              <a class="post-title" href="blog-post.html">
                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
              </a>
              <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to
                create more light, to open people’s eyes, to reveal the marvels around ...</p>
            </div>
          </article>

          <article class="col-md-4 col-sm-6">
            <figure class="blog-thumb">
              <img src="images/blog/blog-2.jpg" alt="blog-thumb">
            </figure>
            <div class="post-area">
              <a class="post-cat" href="">
                <h4>Illustration</h4>
              </a>
              <a class="post-title" href="blog-post.html">
                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
              </a>
              <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to
                create more light, to open people’s eyes, to reveal the marvels around ...</p>
            </div>
          </article>

          <article class="col-md-4 col-sm-6">
            <figure class="blog-thumb">
              <img src="images/blog/blog-3.jpg" alt="blog-thumb">
            </figure>
            <div class="post-area">
              <a class="post-cat" href="">
                <h4>Inspiration</h4>
              </a>
              <a class="post-title" href="blog-post.html">
                <h3>At vero eos et accusamus et iusto odio dignissimos</h3>
              </a>
              <p class="post-content">No one lights a lamp in order to hide it behind the door: the purpose of light is to
                create more light, to open people’s eyes, to reveal the marvels around ...</p>
            </div>
          </article>
        </div>
        <div class="row">
          <div class="col-md-12 text-center">
            <a class="btn blog-btn" href="blog.html">See what else is going on...</a>
          </div>
        </div>
      </section>
      <!-- END BLOG -->

      <!-- BEGIN SUBSCRIPTION -->
      <section class="subscribe text-center">
        <div class="row">
          <div class="col-md-12">
            <h3>Stay Tuned by subscribing to our Newsletter.</h3>
            <p>We will not share your email.</p>

            <form role="form">
              <input type="text" class="form-control placeholder" placeholder="Enter Your Email">
              <button class="btn" type="submit">Subscribe</button>
            </form>
          </div>
        </div>
      </section>
      <!-- END SUBSCRIPTION -->

      <!-- BEGIN CTA -->
      <section class="cta text-center">
        <div class="row">
          <div class="col-md-12">
            <h3>Purchase Team Pro and Get Access To</h3>
            <p>6 Pre-built color scheme, less, php enabled contact form, slider and parallax home and Pro SUPPORT</p>
            <a href="http://www.cssmoban.com//download/team-creative-business-portfolio-template/" class="btn">Purchase
              Now</a>
          </div>
        </div>
      </section>
      <!-- END CTA -->

      <!-- BEGIN CONTACT -->
      <section id="contact" class="contact gray">
        <div class="row">
          <div class="col-md-12 mg-bt-80">
            <div class="header-content">
              <h2>Contact Us</h2>
              <h3>Let us know if you have any query</h3>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <div class="address">
              <h2>Get in touch</h2>
              <p>Quod cum ita sit, paucae domus stud torpentis exundant, vocali sonu, perflabili tinnitu fidium
                resultantes. denique pro philosopho cantor et in locum oratoris doctor a</p>
              <h2>Team Office</h2>
              <ul class="office">
                <li><i class="fa fa-map-marker"></i> <strong>Address:</strong> 1234 Street Name, City Name, United States
                </li>
                <li><i class="fa fa-phone"></i> <strong>Phone:</strong> (123) 456-7890</li>
                <li><i class="fa fa-envelope"></i> <strong>Email:</strong> <a href="mailto:mail@example.com">mail@example.com</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-sm-6 col-md-6">
            <form id="contact-form" role="form">
              <div class="form-group">
                <input type="text" class="form-control" id="c_name" placeholder="Name">
              </div>

              <div class="form-group">
                <input type="email" class="form-control" id="c_email" placeholder="Email">
              </div>

              <div class="form-group">
                <textarea class="form-control" id="c_message" rows="10" placeholder="Message"></textarea>
              </div>
              <br/>
              <button type="submit" class="btn">Send Message</button>
              <div class="ajax-response"></div>
            </form>
          </div>

        </div>
      </section>
      <!-- END CONTACT -->
      <!-- BEGIN FOOTER -->
      <footer>
        <div class="row">
          <div class="col-md-12">
            <div class="social">
              <a href="javascript:;"><i class="fa fa-facebook"></i></a>
              <a href="javascript:;"><i class="fa fa-twitter"></i></a>
              <a href="javascript:;"><i class="fa fa-pinterest"></i></a>
              <a href="javascript:;"><i class="fa fa-dribbble"></i></a>
            </div>
            <p>
              © 2015 More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect
              from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a> | Images <a
                href="https://pixabay.com/">Pixabay</a>
            </p>
          </div>
        </div>
      </footer>
      <!-- END FOOTER -->
    </div>
  </div>


  <!-- Back to top -->
  <div id="backtotop">
    <a class="to-top-btn sscroll" href="index.html#home"><i class="fa fa-angle-double-up"></i></a>
  </div>
</div>
<!-- Library Scripts -->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lib/jquery.preloader.js"></script>
<script src="js/lib/nivo-lightbox.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lib/jquery.superslides.min.js"></script>
<script src="js/lib/smoothscroll.js"></script>
<script src="js/lib/jquery.sudoslider.min.js"></script>
<script src="js/lib/jquery.bxslider.min.js"></script>
<script src="js/lib/jquery.mixitup.min.js"></script>
<script src="js/lib/jquery.backtotop.js"></script>
<script src="js/lib/jquery.carouFredSel-6.2.1-packed.js"></script>
<script src="js/lib/retina.min.js"></script>

<!-- Custom Script -->
<script src="js/main.js"></script>
</body>

</html>
